<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { dwtxxzList } from "@/data/qkpdjl";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import { postJbfaTable } from "@/api/table";

const editorRef = shallowRef();
const valueHtml = ref(
  "（1）有利条件：指挥所建设方面,全市共有基本指挥所XX个、预备指挥所XX个、机动指挥所XX个、地面指挥中心XX个，共计XX个，达到建设标准XX%，能够满足需要。地下工程基本满足需要。（2）不利因素：预警报知建设方面，本级覆盖率未达到100%，存在一定的警报发送盲区。人员防护工程方面，可用面积XX㎡，人均防护面积为XX㎡，与国家建设标准人均防护面积0.85㎡相差较大，不能满足需要。掩蔽场所方面，本级辖区内就近可用的掩蔽场所，人均面积 XX㎡，平均人员间隔距离不足4米，不能满足需要。疏散地域方面，疏散地域人口XX人，城区需疏散人口XX人，超过驻地人口1/2，不能满足需要。专业力量建设方面，有XX类、XX支、XX人，占专业队类型的比例为XX%，人员数量达到城市人口的XX‰，不能够满足需要。重要目标防护体系建设方面：本级目标关键部位建有工程加固不能满足需要,转移场地不能满足需要,伪装设施、拦阻设施、干扰设施不能满足需要。</p>"
);
const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "情况判断结论-我人民防空能力现状" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "利弊因素")?.v || "";
    valueHtml10.value =
      data.find((x) => x.k === "指挥体系及指挥场所建设现状")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "指挥手段建设现状")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "预警报知建设现状")?.v || "";
    valueHtml13.value =
      data.find((x) => x.k === "人防防护体系建设现状")?.v || "";
    valueHtml14.value =
      data.find((x) => x.k === "兼顾人防要求的地下工程情况统计表")?.v || "";
    valueHtml15.value = data.find((x) => x.k === "掩蔽场所情况统计表")?.v || "";
    valueHtml16.value = data.find((x) => x.k === "疏散地域情况统计表")?.v || "";
    valueHtml17.value = data.find((x) => x.k === "疏散基地情况统计表")?.v || "";
    valueHtml18.value =
      data.find((x) => x.k === "人防专业队伍体系建设现状")?.v || "";
    valueHtml19.value =
      data.find((x) => x.k === "重要目标防护体系建设现状")?.v || "";
    valueHtml20.value =
      data.find((x) => x.k === "重要目标防护场所和措施建设情况统计表")?.v || "";
    valueHtml21.value = data.find((x) => x.k === "警报系统现状")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const editorRef10 = shallowRef();
const valueHtml10 = ref("指挥体系及指挥场所建设现状");
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref("指挥手段建设现状");
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 = ref("预警报知建设现状");
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref("人防防护体系建设现状");
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};
const editorRef14 = shallowRef();
const valueHtml14 = ref("兼顾人防要求的地下工程情况统计表");
const toolbarConfig14 = {};
const editorConfig14 = { placeholder: "请输入内容..." };
const mode14 = ref("default");
const handleCreated14 = (editor) => {
  editorRef14.value = editor; // 记录 editor 实例，重要！
};
const editorRef15 = shallowRef();
const valueHtml15 = ref("掩蔽场所情况统计表");
const toolbarConfig15 = {};
const editorConfig15 = { placeholder: "请输入内容..." };
const mode15 = ref("default");
const handleCreated15 = (editor) => {
  editorRef15.value = editor; // 记录 editor 实例，重要！
};
const editorRef16 = shallowRef();
const valueHtml16 = ref("疏散地域情况统计表");
const toolbarConfig16 = {};
const editorConfig16 = { placeholder: "请输入内容..." };
const mode16 = ref("default");
const handleCreated16 = (editor) => {
  editorRef16.value = editor; // 记录 editor 实例，重要！
};
const editorRef17 = shallowRef();
const valueHtml17 = ref("疏散基地情况统计表");
const toolbarConfig17 = {};
const editorConfig17 = { placeholder: "请输入内容..." };
const mode17 = ref("default");
const handleCreated17 = (editor) => {
  editorRef17.value = editor; // 记录 editor 实例，重要！
};
const editorRef18 = shallowRef();
const valueHtml18 = ref("人防专业队伍体系建设现状");
const toolbarConfig18 = {};
const editorConfig18 = { placeholder: "请输入内容..." };
const mode18 = ref("default");
const handleCreated18 = (editor) => {
  editorRef18.value = editor; // 记录 editor 实例，重要！
};
const editorRef19 = shallowRef();
const valueHtml19 = ref("重要目标防护体系建设现状");
const toolbarConfig19 = {};
const editorConfig19 = { placeholder: "请输入内容..." };
const mode19 = ref("default");
const handleCreated19 = (editor) => {
  editorRef19.value = editor; // 记录 editor 实例，重要！
};
const editorRef20 = shallowRef();
const valueHtml20 = ref("重要目标防护场所和措施建设情况统计表");
const toolbarConfig20 = {};
const editorConfig20 = { placeholder: "请输入内容..." };
const mode20 = ref("default");
const handleCreated20 = (editor) => {
  editorRef20.value = editor; // 记录 editor 实例，重要！
};
const editorRef21 = shallowRef();
const valueHtml21 = ref("警报系统现状：共有XX个警报器。具体情况如下:");
const toolbarConfig21 = {};
const editorConfig21 = { placeholder: "请输入内容..." };
const mode21 = ref("default");
const handleCreated21 = (editor) => {
  editorRef21.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "情况判断结论-我人民防空能力现状",
      data: [
        {
          k: "利弊因素",
          v: valueHtml.value,
        },
        {
          k: "指挥体系及指挥场所建设现状",
          v: valueHtml10.value,
        },
        {
          k: "指挥手段建设现状",
          v: valueHtml11.value,
        },
        {
          k: "预警报知建设现状",
          v: valueHtml12.value,
        },
        {
          k: "人防防护体系建设现状",
          v: valueHtml13.value,
        },
        {
          k: "兼顾人防要求的地下工程情况统计表",
          v: valueHtml14.value,
        },
        {
          k: "掩蔽场所情况统计表",
          v: valueHtml15.value,
        },
        {
          k: "疏散地域情况统计表",
          v: valueHtml16.value,
        },
        {
          k: "疏散基地情况统计表",
          v: valueHtml17.value,
        },
        {
          k: "人防专业队伍体系建设现状",
          v: valueHtml18.value,
        },
        {
          k: "重要目标防护体系建设现状",
          v: valueHtml19.value,
        },
        {
          k: "重要目标防护场所和措施建设情况统计表",
          v: valueHtml20.value,
        },
        {
          k: "警报系统现状",
          v: valueHtml21.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

const getSummaries = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    sums[index] = "X";
  });
  return sums;
};
// 指挥手段
const handerMethodSd = ({ row, column, rowIndex, columnIndex, name }) => {
  nextTick(() => {
    const dom = document.querySelector(`.${column.id}`);
    if (columnIndex === 1 && column.label === name) {
      dom.setAttribute("colspan", 2);
      dom.innerHTML = column.label;
    }
    if (columnIndex === 2 && !column.label) {
      dom.setAttribute("colspan", 0);
      dom.style.display = "none";
    }
  });
  return {};
};
// 队伍体系表格
const headerCellStyleDwtx = ({ row, column, rowIndex, columnIndex }) => {
  nextTick(() => {
    if (columnIndex > 0) {
      const propNum = Number(column.property[column.property.length - 1]);
      const dom = document.querySelector(`.${column.id}`);
      if (propNum % 2 === 0) {
        // 被合并的
        dom.setAttribute("colspan", 0);
        dom.style.display = "none";
      } else {
        // 合并的
        dom.setAttribute("colspan", 2);
        dom.innerHTML = column.label;
      }
    }
  });

  return {
    height: "40px",
  };
};
const cellStyleDwtx = () => {
  return {
    height: "38px",
    padding: "4px 0",
    fontSize: "14px",
  };
};
const getSummariesDwtx = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    sums[index] = "X";
  });
  return sums;
};

// 指挥所建设情况一览表
const zddjList = ref([]);
const getZddjData = () => {
  return postJbfaTable("zhsjsqkylbList").then((res) => {
    if (res.code === 200) {
      zddjList.value = res?.data || [];
    }
  });
};
// 地面指挥中心指挥手段建设情况统计表
const dmzhList = ref([]);
const getDmzhData = () => {
  return postJbfaTable("dmzhzxzhsdList").then((res) => {
    if (res.code === 200) {
      dmzhList.value = res?.data || [];
    }
  });
};
// 基本指挥所指挥手段建设情况统计表
const jbzhList = ref([]);
const getJbzhData = () => {
  return postJbfaTable("jbzhszhsdList").then((res) => {
    if (res.code === 200) {
      jbzhList.value = res?.data || [];
    }
  });
};
// 预备指挥所指挥手段建设情况统计表
const ybzhList = ref([]);
const getYbzhData = () => {
  return postJbfaTable("ybzhszhsdList").then((res) => {
    if (res.code === 200) {
      ybzhList.value = res?.data || [];
    }
  });
};
// 机动指挥所指挥手段建设情况统计表
const jdzhList = ref([]);
const getJdzhData = () => {
  return postJbfaTable("jdzhszhsdList").then((res) => {
    if (res.code === 200) {
      jdzhList.value = res?.data || [];
    }
  });
};
// 空情预警信息系统分布统计表
const kqyjList = ref([]);
const getKqyjData = () => {
  return postJbfaTable("kqyjxxxtfbtjbList").then((res) => {
    if (res.code === 200) {
      kqyjList.value = res?.data || [];
    }
  });
};
// 警报器统计表
const jbqList = ref([]);
const getJbqData = () => {
  return postJbfaTable("jbqtjbList").then((res) => {
    if (res.code === 200) {
      jbqList.value = res?.data || [];
    }
  });
};
// 人防工程情况统计表
const rfgcList = ref([]);
const getRfgcData = () => {
  return postJbfaTable("rfgcqktjbList").then((res) => {
    if (res.code === 200) {
      rfgcList.value = res?.data || [];
    }
  });
};
// 兼顾人防要求的地下工程情况统计表
const jgList = ref([]);
const getJgData = () => {
  return postJbfaTable("dxgcqktjbList").then((res) => {
    if (res.code === 200) {
      jgList.value = res?.data || [];
    }
  });
};
// 掩蔽场所情况统计表
const ybList = ref([]);
const getYbData = () => {
  return postJbfaTable("ybcsqktjbList").then((res) => {
    if (res.code === 200) {
      ybList.value = res?.data || [];
    }
  });
};
// 疏散地域情况统计表
const ssList = ref([]);
const getSsData = () => {
  return postJbfaTable("ssdyqktjbList").then((res) => {
    if (res.code === 200) {
      ssList.value = res?.data || [];
    }
  });
};
// 疏散基地情况统计表
const ssJdList = ref([]);
const getSsjdData = () => {
  return postJbfaTable("ssjdqktjbList").then((res) => {
    if (res.code === 200) {
      ssJdList.value = res?.data || [];
    }
  });
};
// 人防专业队建设情况统计表
const zydList = ref([]);
const getZydData = () => {
  return postJbfaTable("rfzybjsqktjbList").then((res) => {
    if (res.code === 200) {
      zydList.value = [
        {
          data0: "",
          data1: "队数",
          data2: "人数",
          data3: "队数",
          data4: "人数",
          data5: "队数",
          data6: "人数",
          data7: "队数",
          data8: "人数",
          data9: "队数",
          data10: "人数",
          data11: "队数",
          data12: "人数",
          data13: "队数",
          data14: "人数",
          data15: "队数",
          data16: "人数",
          data17: "队数",
          data18: "人数",
          data19: "队数",
          data20: "人数",
          data21: "队数",
          data22: "人数",
          data23: "队数",
          data24: "人数",
          data25: "队数",
          data26: "人数",
          data27: "队数",
          data28: "人数",
          data29: "队数",
          data30: "人数",
          data31: "队数",
          data32: "人数",
          data33: "队数",
          data34: "人数",
        },
        ...(res?.data || []),
      ];
    }
  });
};
// 重要目标分布情况统计表
const zymbList = ref([]);
const getZymbData = () => {
  return postJbfaTable("zymbfbqktjbList").then((res) => {
    if (res.code === 200) {
      zymbList.value = res?.data || [];
    }
  });
};
// 重要目标防护场所和措施建设情况统计表
// const fhcsList = ref([]);
// const getFhcsData = () => {
//   return postJbfaTable("zhoyaomubiaofanghucuoshiList").then((res) => {
//     if (res.code === 200) {
//       fhcsList.value = res?.data || [];
//     }
//   });
// };

onMounted(async () => {
  initHtml();
  await getZddjData();
  await getDmzhData();
  await getJbzhData();
  await getYbzhData();
  await getJdzhData();
  await getKqyjData();
  await getJbqData();
  await getRfgcData();
  // await getJgData();
  await getYbData();
  await getSsData();
  await getSsjdData();
  await getZydData();
  await getZymbData();
  // await getFhcsData();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
  if (editorRef14.value) editorRef14.value.destroy();
  if (editorRef15.value) editorRef15.value.destroy();
  if (editorRef16.value) editorRef16.value.destroy();
  if (editorRef17.value) editorRef17.value.destroy();
  if (editorRef18.value) editorRef18.value.destroy();
  if (editorRef19.value) editorRef19.value.destroy();
  if (editorRef20.value) editorRef20.value.destroy();
  if (editorRef21.value) editorRef21.value.destroy();
});

const tableData = ref([]);
const city = window.globalObj.name;

const tableData1 = ref([]);

const tableData2 = ref([]);

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};

const handerMethod = ({ row, column, rowIndex, columnIndex }) => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
</script>
<template>
  <div>
    <FirstTitle name="指挥体系及指挥场所建设现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <!--  <div class="top-15 zddj">
      共有地面指挥中心XX个、基本指挥所XX个、预备指挥所XX个、机动指挥所XX个。具体情况如下：
    </div> -->
    <div class="top-15 zddj text-center">{{ city }}指挥所建设情况一览表</div>
    <el-table
      id="table"
      :data="zddjList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: dmzhList.length,
          })
      "
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政单位" />
      <el-table-column prop="dimian" label="地面指挥中心" />
      <el-table-column prop="jiben" label="基本指挥所" />
      <el-table-column prop="yubei" label="预备指挥所" />
      <el-table-column prop="jidong" label="机动指挥所" />
    </el-table>

    <FirstTitle name="指挥手段建设现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <!--   <div class="top-15 zddj">
      各级各类指挥所（含地面指挥中心）接入人防光缆专网的XX个、国家党政专网的XX个、民用互联网的XX个，装备125瓦短波电台的XX个、125瓦短波电台车载站的XX个、卫星地面站的XX个、卫星车载站的XX个、北斗导航定位系统的XX个、超短波数字集群XX个、超短波数字集群车载站XX个、4G/5G专网XX个，配备指挥信息系统的XX个、便捷指挥信息系统XX个、车载指挥信息系统XX个、空情接收处理自动化系统XX个、电话终端XX个。具体情况如下：
    </div> -->
    <div class="top-15 zddj">地面指挥中心指挥手段建设情况：</div>
    <div class="top-15 zddj text-center">
      {{ city }}地面指挥中心指挥手段建设情况统计表
    </div>

    <el-table
      :data="dmzhList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: dmzhList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />

      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <div class="top-15 zddj">基本指挥所指挥手段建设情况:</div>
    <div class="top-15 zddj text-center">
      {{ city }}基本指挥所指挥手段建设情况统计表
    </div>
    <el-table
      :data="jbzhList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: jbzhList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />

      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <div class="top-15 zddj">预备指挥所指挥手段建设情况:</div>
    <div class="top-15 zddj text-center">
      {{ city }}预备指挥所指挥手段建设情况统计表
    </div>
    <el-table
      :data="ybzhList"
      class="top-15"
      style="width: 100%"
      max-height="500"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: ybzhList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <div class="top-15 zddj">机动指挥所指挥手段建设情况:</div>
    <div class="top-15 zddj text-center">
      {{ city }}机动指挥所指挥手段建设情况统计表
    </div>
    <el-table
      :data="jdzhList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: jdzhList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <FirstTitle name="预警报知建设现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}空情预警信息系统分布统计表
    </div>

    <el-table
      :data="kqyjList"
      class="top-15"
      style="width: 100%"
      :span-method="spanMethod"
      :header-cell-style="handerMethod"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区划" align="center" />

      <el-table-column prop="data2" label="单位名称" align="center" />
    </el-table>
    <FirstTitle name="警报系统现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef21"
        :defaultConfig="toolbarConfig21"
        :mode="mode21"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml21"
        :defaultConfig="editorConfig21"
        :mode="mode21"
        @onCreated="handleCreated21"
      />
    </div>
    <div class="top-15 zddj text-center">{{ city }}警报器统计表</div>

    <el-table
      id="table"
      :data="jbqList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: jbqList.length,
          })
      "
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" />
      <el-table-column prop="data2" label="面积（平方公里）" />
      <el-table-column prop="data3" label="数量" />
      <el-table-column prop="data4" label="警报器城市覆盖率（%）" />
      <el-table-column prop="data5" label="警报器完好率（%）" />
    </el-table>

    <FirstTitle name="人防防护体系建设现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}人防工程情况统计表（单位:个）
    </div>

    <el-table
      id="table"
      :data="rfgcList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区域" align="center" />
      <el-table-column prop="total" label="总数" />
      <el-table-column prop="zhihuitongxin" label="指挥通信工程" />
      <el-table-column prop="yiliaojiuhu" label="医疗救护工程" />
      <el-table-column prop="zhuanyedui" label="专业队工程" />
      <el-table-column prop="renyuanyanbi" label="人员掩蔽工程" />
      <el-table-column prop="wuzichubei" label="物资储备工程" />
      <el-table-column prop="area" label="使用面积(㎡)" />
      <el-table-column prop="peopleNum" label="可容纳人数(人)" />
    </el-table>

    <!-- <div class="top-15 zddj">
      兼顾人防要求的地下工程现状：共有XX个，使用面积XX㎡，可容纳XX人。具体情况如下:
    </div> -->
    <div class="top-15 zddj text-center">
      {{ city }}兼顾人防要求的地下工程情况统计表
    </div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef14"
        :defaultConfig="toolbarConfig14"
        :mode="mode14"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml14"
        :defaultConfig="editorConfig14"
        :mode="mode14"
        @onCreated="handleCreated14"
      />
    </div>
   <!--  <el-table
      id="table"
      :data="jgList"
      class="top-15"
      style="width: 100%"
      :span-method="spanMethod"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" align="center" />
      <el-table-column prop="data2" label="总数(个)" />
      <el-table-column prop="data3" label="使用面积(㎡)" />
      <el-table-column prop="data4" label="可容纳人数(人)" />
    </el-table> -->

    <!-- <div class="top-15 zddj">
      掩蔽场所现状：共XX个掩蔽场所,总面积XX㎡，可掩蔽XX人。具体情况如下:
    </div> -->
    <div class="top-15 zddj text-center">{{ city }}掩蔽场所情况统计表</div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef15"
        :defaultConfig="toolbarConfig15"
        :mode="mode15"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml15"
        :defaultConfig="editorConfig15"
        :mode="mode15"
        @onCreated="handleCreated15"
      />
    </div>
    <el-table
      id="table"
      :data="ybList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" align="center" />
      <el-table-column prop="data2" label="总数" />
      <el-table-column prop="data3" label="面积(㎡)" />
      <el-table-column prop="data4" label="可隐蔽人数(人)" />
    </el-table>

    <!--  <div class="top-15 zddj">
      疏散地域现状：共有XX个疏散地域，当地人口总数XX人，可接收人口XX人。具体情况如下:
    </div> -->
    <div class="top-15 zddj text-center">{{ city }}疏散地域情况统计表</div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef16"
        :defaultConfig="toolbarConfig16"
        :mode="mode16"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml16"
        :defaultConfig="editorConfig16"
        :mode="mode16"
        @onCreated="handleCreated16"
      />
    </div>
    <el-table
      id="table"
      :data="ssList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="使用单位" align="center" />
      <el-table-column prop="data2" label="疏散地域数量" />
      <el-table-column prop="data3" label="疏散地域人口数（万人）" />
      <el-table-column prop="data4" label="可接收人口数（万人）" />
    </el-table>

    <!--   <div class="top-15 zddj">
      疏散基地现状：共有疏散基地XX个，占地面积XX㎡，可接收XX人。具体情况如下:
    </div> -->
    <div class="top-15 zddj text-center">{{ city }}疏散基地情况统计表</div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef17"
        :defaultConfig="toolbarConfig17"
        :mode="mode17"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml17"
        :defaultConfig="editorConfig17"
        :mode="mode17"
        @onCreated="handleCreated17"
      />
    </div>
    <el-table
      :data="ssJdList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: ssJdList.length,
          })
      "
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区划" align="center" />
      <el-table-column prop="data2" label="疏散基地名称" align="center" />
      <el-table-column prop="data3" label="地址" align="center" />
      <el-table-column prop="data4" label="使用面积（㎡）" align="center" />
      <el-table-column prop="data5" label="建筑面积（㎡）" align="center" />
      <el-table-column prop="data6" label="接收人口（人）" align="center" />
    </el-table>

    <FirstTitle name="人防专业队伍体系建设现状" class="top-15" />
    <!--  <div class="top-15 zddj">共有XX类、XX个专业队,共XX人，具体情况如下:</div> -->

    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef18"
        :defaultConfig="toolbarConfig18"
        :mode="mode18"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml18"
        :defaultConfig="editorConfig18"
        :mode="mode18"
        @onCreated="handleCreated18"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}人防专业队建设情况统计表
    </div>
    <el-table
      :header-cell-style="headerCellStyleDwtx"
      :cell-style="cellStyleDwtx"
      class="top-15"
      id="tableDwtx"
      :data="zydList"
      max-height="500px"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: zydList.length,
          })
      "
    >
      <el-table-column
        min-width="100"
        prop="data0"
        label="行政区划"
        align="center"
      />
      <el-table-column prop="data1" label="供水抢险抢修" align="center" />
      <el-table-column prop="data2" label="供水抢险抢修1" align="center" />
      <el-table-column prop="data3" label="电力抢险抢修" align="center" />
      <el-table-column prop="data4" label="电力抢险抢修1" align="center" />
      <el-table-column prop="data5" label="燃气抢险抢修" align="center" />
      <el-table-column prop="data6" label="燃气抢险抢修1" align="center" />
      <el-table-column prop="data7" label="供热抢险抢修" align="center" />
      <el-table-column prop="data8" label="供热抢险抢修1" align="center" />
      <el-table-column prop="data9" label="道桥抢险抢修" align="center" />
      <el-table-column prop="data10" label="道桥抢险抢修1" align="center" />
      <el-table-column prop="data11" label="建筑抢险抢修" align="center" />
      <el-table-column prop="data12" label="建筑抢险抢修1" align="center" />
      <el-table-column prop="data15" label="消防救援" align="center" />
      <el-table-column prop="data16" label="消防救援1" align="center" />
      <el-table-column prop="data17" label="医疗救护" align="center" />
      <el-table-column prop="data18" label="医疗救护1" align="center" />
      <el-table-column prop="data19" label="防化防疫" align="center" />
      <el-table-column prop="data20" label="防化防疫1" align="center" />
      <el-table-column prop="data21" label="治安" align="center" />
      <el-table-column prop="data22" label="治安1" align="center" />
      <el-table-column prop="data23" label="交通运输" align="center" />
      <el-table-column prop="data24" label="交通运输1" align="center" />
      <el-table-column prop="data25" label="通信" align="center" />
      <el-table-column prop="data26" label="通信1" align="center" />
      <el-table-column prop="data27" label="信息防护" align="center" />
      <el-table-column prop="data28" label="信息防护1" align="center" />
      <el-table-column prop="data29" label="心理防护" align="center" />
      <el-table-column prop="data30" label="心理防护1" align="center" />
      <el-table-column prop="data31" label="伪装防护专业队" align="center" />
      <el-table-column prop="data32" label="伪装防护专业队1" align="center" />
      <el-table-column prop="data33" label="核化检测洗消" align="center" />
      <el-table-column prop="data34" label="核化检测洗消1" align="center" />
    </el-table>

    <FirstTitle name="重要目标防护体系建设现状" class="top-15" />
    <!--  <div class="top-15 zddj">
      重要目标分布情况：共有XX个重要目标。具体情况如下:
    </div> -->
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef19"
        :defaultConfig="toolbarConfig19"
        :mode="mode19"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml19"
        :defaultConfig="editorConfig19"
        :mode="mode19"
        @onCreated="handleCreated19"
      />
    </div>
    <div class="top-15 zddj text-center">{{ city }}重要目标分布情况统计表</div>

    <el-table
      id="table"
      :data="zymbList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区划（域）" />
      <el-table-column prop="data2" label="目标名称" />
      <el-table-column prop="data3" label="地址" />
      <el-table-column prop="data4" label="目标等级" />
      <el-table-column prop="data5" label="目标性质" />
    </el-table>

    <!--  <div class="top-15 zddj">
      重要目标防护体系建设情况：重要目标关键部位建有地下工程的XX个、工程加固的XX个、转移场地的XX个、伪装设施的XX个、拦阻设施的XX个、干扰设施的XX个。具体情况如下:
    </div> -->
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef20"
        :defaultConfig="toolbarConfig20"
        :mode="mode20"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml20"
        :defaultConfig="editorConfig20"
        :mode="mode20"
        @onCreated="handleCreated20"
      />
    </div>

    <FirstTitle name="利弊因素" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
